<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>OAL</title>
    <link rel="stylesheet" href="../../common/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../common/css/standard.css">
</head>
<body class="oal-layout-subPage">

<div class="oal-page">
    <div class="oal-page-content-section">
        <!-- Header -->
        <div class="oal-page-header-fixed">
            <div class="oal-page-header row">
                <div class="oal-page-header-logo-section">
                    <div class="oal-page-header-logo"></div>
                </div>
                <div class="oal-page-header-actions text-right">
                    <div class="oal-page-header-menu-list">
                        <div class="oal-page-header-menu-item oal-page-header-menu-promotion ">
                            <span>Seabird Promotion</span>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-myRate">
                            <div>My Rates<span class="badge">New</span></div>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-myShipment ">
                            <div>My Shipments<span class="badge">New</span></div>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-notification isActive">
                            <span>Notification</span>
                            <a class="oal-page-header-menu-notification-badge" tabindex="1" data-container="body"
                               data-toggle="popover" data-trigger="focus" role="button"  data-placement="bottom" data-html="true"
                                  title=""
                                  data-content="<div><ul class='popover-list'>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      <li class='popover-list-item'><div>B/L# OOLU4017248180 Freedemurrage time at destination expires in 2 days</div><div class='popover-list-date'>29 Jun 2016, 18:00</div></li>
                                      </ul>
                                      <div class='popover-list-more'><a href='#'>More &gt;&gt;</a></div>
                                      </div>">
                                <span class="badge">
                                    New
                                </span></a>
                        </div>

                        <div class="oal-page-header-menu-item oal-page-header-userProfile">
                            <div aria-expanded="true" aria-haspopup="true" data-toggle="dropdown"
                                 class="btn-userProfile">
                                <span class="btn-userProfile-image"><img width="22px"
                                                                         src="../../common/images/default.png"></span>
                                <span class="action">Jason</span>
                                <span class="caret"></span>
                            </div>
                            <ul class="dropdown-menu oal-page-header-menu-dropdown">
                                <li><a href="homepage_setting.html"><span class= "pull-left oal-page-menu-icon-setting"></span>&nbsp;&nbsp;Setting</a></li>
                                <li><a href="#"><span class="pull-left oal-page-menu-icon-logOut"></span>&nbsp;&nbsp;Logout</a></li>
                            </ul>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-setting">
                            <span>Setting</span>
                        </div>
                        <div class="oal-page-header-menu-item oal-page-header-menu-logout">
                            <span>Logout</span>
                        </div>
                    </div>

                    <div class="oal-page-header-chat-miniScreen">
                        <a class="hamburger menu" href="javascript:void(0)" data-tiggle="click" data-toggle="tooltip"
                           data-placement="bottom" title="Menu">
                            <div></div>
                            <div></div>
                            <div></div>
                        </a>
                    </div>
                </div>

            </div>
        </div>

        <div class="oal-page-content">
            <div class="oal-page-content-item">
                <div class="oal-page-content-item-home">
                    <!-- Promo -->
                    <div class="oal-page-content-promo">
                        <div class="row oal-promo-item-list hide oal-promo-item-template">
                            <div class="oal-promo-item">
                                <div class="oal-box-shadow">
                                    <div  class="oal-promo-item-bg-image" >

                                    </div>
                                    <div class="oal-promo-item-bg" title="Click for Promotion Details"></div>
                                    <div class="oal-promo-item-sale oal-promo-item-sale-default" align="center">
                                        <div class="oal-promo-item-sale-text">
                                            <div class="oal-promo-item-sale-text-to">to</div>
                                            <div class="oal-promo-item-sale-text-port">Shanghai</div>

                                            <div class="oal-promo-item-sale-text-sale-area style-1 hide">
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per">10</div>
                                                    <div class="oal-promo-item-sale-text-sale-per-title">

                                                        <div>%</div>
                                                        <div>OFF</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-area  style-2 hide">
                                                <div class="oal-promo-item-sale-text-sale-more">More than</div>
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per">10</div>
                                                    <div class="oal-promo-item-sale-text-sale-per-title">
                                                        <div>%</div>
                                                        <div>OFF</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-area  style-3 hide">
                                                <div class="oal-promo-item-sale-text-sale">
                                                    <div class="oal-promo-item-sale-text-sale-per-title ">
                                                        Lower Price
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="oal-promo-item-sale-text-sale-valid">Valid</div>
                                            <div class="oal-promo-item-sale-text-char">until</div>
                                            <div class="oal-promo-item-sale-text-number">Jun 07</div>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-actions">
                                        <div class="oal-promo-item-actions-detail">Click for Details <span class="glyphicon glyphicon-menu-down"></span></div>
                                        <div class="oal-promo-item-actions-records hide"  data-toggle="tooltip" data-placement="top" title="You had book this at">
                                            <span>My Booking</span>
                                        </div>
                                        <div class="oal-promo-item-actions-book hide">
                                            <span>Book Now</span>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-detail-info">
                                        <div class="oal-promo-item-detail-ss">

                                            <div class="oal-promo-item-detail-ss-etd">
                                                <div>ETA</div>
                                                <div>Aug 05</div>
                                                <div>TUE</div>
                                            </div>
                                            <div class="oal-promo-item-detail-ss-port">
                                                <div>
                                                    <span class="detail-icon"><img src="../../common/images/vessel.png"  /></span>
                                                    <span class="detail-to hide">to</span>
                                                    <span class="detail-pod"></span>
                                                </div>

                                            </div>
                                        </div>


                                    </div>
                                    <div class="oal-promo-item-time-alert hide">
                                        <div class="oal-promo-item-time-alert-msg">
                                            <div><h2>&nbsp;</h2></div>
                                            <div>Today Only</div>
                                        </div>
                                    </div>
                                    <div class="oal-promo-item-alert hide">
                                        A visitor made booking today with this promotion.
                                    </div>
                                    <div class="oal-promo-item-sold hide">
                                        <span>SOLD<br>OUT</span>
                                    </div>
                                    <div class="oal-promo-item-book">
                                        <span>Book<br>Now</span>
                                    </div>


                                </div>

                            </div>
                        </div>
                        <div class="oal-promo-item-list-all"></div>
                        <div class="oal-promo-item-detail-overall  oal-promo-item-detail-overall-template hide oal-promo-item-detail-overall-init">
                            <div class="oal-promo-item-detail-overall-detail">
                                <!--
                                <div class="oal-promo-item-detail-overall-detail-title">
                                    <span class="detail-por">Southampton</span>
                                    <span class="oal-promo-item-detail-ss-transhipment-arrow"></span>
                                    <span class="detail-pod">Shanghai</span>
                                </div>
                                -->
                                <div class="row oal-promo-item-detail-overall-detail-result">
                                    <div class="col-lg-5 col-md-12 col-sm-12 oal-promo-item-detail-overall-detail-result-section1">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12  oal-promo-item-detail-overall-detail-title-box text-center">
                                                <div class="oal-promo-item-detail-overall-detail-title">
                                                    <div class="detail-por text-center">
                                                        <span class="city">Southampton</span>
                                                        <div class="detail-etd">Jul 05, Mon</div>
                                                    </div>
                                                    <div class="detail-arrow text-center">
                                                        <div class="oal-promo-item-detail-ss-transhipment-arrow"></div>
                                                        <div class="detail-vessel-voyage text-center">NYK REMUS-039W</div>
                                                    </div>
                                                    <div class="detail-pod text-center">
                                                        <span class="city">Sydney</span>
                                                        <div class="detail-eta">Aug 05, Mon</div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="row detail-info-margin">
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <h5 class="label">CY Cutoff</h5>
                                                <h5 class="result">Jun 12, Mon</h5>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                                <h5 class="label">Commodity</h5>
                                                <h5 class="result">General Cargo</h5>
                                            </div>
                                            <div class="col-lg-2 col-md-2 col-sm-2">
                                                <h5 class="label">Volume</h5>
                                                <h5 class="result">Min. 10 TEU</h5>
                                            </div>
                                            <div class="col-lg-5 col-md-5 col-sm-5 oal-promo-item-detail-overall-detail-result-hau">
                                                <h5 class="label">Haulage</h5>
                                                <div class="haulage-box">
                                                    <div class="haulage">CY/CY</div>
                                                    <div class="tips-icon">
                                                        <span class="glyphicon glyphicon-info-sign"></span>
                                                    </div>
                                                    <div class="tips">
                                                        <span>For door service haulage rate would apply.</span>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                    <div class="hidden-lg col-md-12 col-sm-12 col-xs-12 special-requirement-margin"></div>
                                    <div class="col-lg-3 col-md-5 col-sm-12 oal-promo-item-detail-overall-detail-result-section2">
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <h5 class="label">Special Requirement</h5>
                                                <h5 class="result">
                                                    Light Weight Cargo (10~15 Tons per TEU)
                                                </h5>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12 remarks-margin">
                                                <h5 class="label">Remarks</h5>
                                                <h5 class="result">Subject to DOC, LSS and all destination charges.</h5>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-7 col-sm-12 oal-promo-item-detail-overall-detail-result-section3">
                                        <div class="row freight-section freight-section-border">
                                            <div class="col-lg-12 col-md-12 col-sm-12">
                                                <h5 class="label">Ocean Freight</h5>
                                                <table class="oal-promo-item-detail-overall-rate-table">
                                                    <tr>
                                                        <td>USD</td>
                                                        <td><span class="highlightText">$900</span>/20GP</td>
                                                        <td><span class="highlightText">$1000</span>/40GP</td>
                                                        <td><span class="highlightText">$1200</span>/40HQ</td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="col-lg-12 col-md-12 col-sm-12 inland-surcharge-margin">
                                                <h5 class="label">Inland Surcharge</h5>
                                                <div class="row">
                                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                                        <div class="oal-promo-item-detail-overall-inland-surcharge">
                                                            <div class="row">
                                                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 inland-city">
                                                                    <div class="input-group">
                                                                        <span class="input-group-addon inland-surcharge-addon"><span class="glyphicon glyphicon-map-marker"></span></span>
                                                                        <input type="text" class="form-control inland-surcharge-field" placeholder="Inland City" aria-describedby="basic-addon1">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 surcharge">
                                                                    <span class="currency">USD</span><span class="fee">$0</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="oal-promo-item-detail-overall-action">
                                    <button class="btn btn-promo-action">Chat for any enquiries or book now</button>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!--News -->
                    <div class="oal-page-content-news-section oal-box-shadow">
                        <div class="oal-page-content-news-list">
                            <div class="oal-page-content-news-title">News Around Your Region</div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-12 news">
                                    <div class="news-item">
                                        <div class="news-date">
                                            <span class="news-date-day">20</span>
                                            <span class="news-date-month">Jun</span>
                                        </div>
                                        <div class="news-text">
                                            <div class="news-text-title">Asia to Europe Trade - Rate Restoration</div>
                                            <div class="news-text-details">Today is an exciting day that we start serving you �?our valued customer.  Hope you enjoy the new experience in Seabird and we are looking forward to hearing your valuable feedback.</div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="oal-page-content-news-item-detail ">
                            <div class="news-content oal-box-shadow">
                                <div class="news-content-left-bar">
                                    <div class="news-content-left-bar-elements">
                                        <span class="news-content-back-icon"></span>
                                        <span>Back</span>
                                    </div>

                                </div>
                                <div class="news-content-details ">
                                    <div class="news-text-title">Asia to Europe Trade - Rate Restoration</div>
                                    <div class="news-text-date">
                                        <span><img src="../../common/images/calender.png" width="22px"/> May 05 2016, Mon</span>
                                    </div>
                                    <div class="news-text-details"><p>Hong Kong Members of the G6 Alliance today announced additional void sailings within their Asia-Europe product to adjust to market demand.<br>

                                        As the G6 Alliance continues to review its product profile, the Loop 6 service will be suspended until further notice.<br>

                                        In order to deliver continuous coverage and service, the G6 Alliance will continue to provide the following rotation:<br>

                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.
                                        Loop 1 : Kobe �?Nagoya �?Shimizu �?Tokyo �?Hong Kong �?Vung Tau �?Singapore �?Jeddah �?Rotterdam �?Hamburg �?Southampton �?Le Havre �?Singapore �?Hong Kong �?Kobe<br>

                                        Loop 4 : Ningbo �?Shanghai (Yangshan) �?Xiamen �?Shekou �?Hong Kong �?Yantian �?Singapore �?Colombo �?Southampton �?Antwerp �?Hamburg �?Rotterdam �?Jeddah �?Jebel Ali �?Singapore �?Hong Kong �?Ningbo<br>

                                        Loop 5 : Kwangyang �?Pusan �?Shanghai (Yangshan) �?Ningbo �?Kaohsiung �?Yantian �?Singapore �?Le Havre �?Rotterdam �?Hamburg �?Southampton �?Singapore �?Shekou �?Kaohsiung �?Kwangyang<br>

                                        Loop 7 : Qingdao �?Shanghai (Yangshan) �?Ningbo �?Hong Kong �?Yantian �?Singapore �?Rotterdam �?Hamburg �?Gdansk �?Gothenburg �?Antwerp �?Southampton �?Singapore �?Yantian �?Qingdao<br>

                                        The G6 Alliance continues to offer a variety of services between Asia and Europe covering all major port pairs with weekly sailings and will make further service adjustments where necessary.<br>

                                        The G6 Alliance members are: APL, Hapag-Lloyd, Hyundai Merchant Marine, Mitsui O.S.K. Lines, Nippon Yusen Kaisha and Orient Overseas Container Line.</p></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="oal-page-content-item-sub">
                    <div class="oal-page-content-rate-section oal-box-shadow">
                        <div class="oal-page-content-notification-title">Notification</div>
                        <div class="oal-page-content-notification-content">
                            <div class="row oal-notification-toolbar">
                                <div class="col-lg-6 col-md-6 col-sm-6">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </span>
                                            <input type="text" class="form-control" placeholder="Search">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 oal-notification-list-buttons hide">

                                    <button class="btn btn-default" id="btn-cancel" type="button">Cancel</button>
                                    <button class="btn btn-default" id="btn-delete" type="button">Delete</button>
                                </div>
                            </div>
                            <ul class="oal-notification-list">
                                <li class="oal-notification-list-item oal-notification-list-item-unread ">
                                    <div class="row ">
                                        <div class="col-lg-6 col-sm-6 col-md-6">


                                            <div class="oal-notification-list-item-group">
                                                <span class="new-indicator badge">New</span>
                                                <div class="oal-notification-list-item-title">

                                                    B/L #  4999900000  Free demurrage
                                                    time at destination expires in 2 days
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oal-notification-list-item-date col-lg-2  col-sm-2 col-md-2">29 Jun 2016 , 18:00</div>
                                        <div class="col-lg-2  col-sm-2 col-md-2"><a >Shipment Detail</a></div>
                                        <div class="oal-notification-list-item-action">

                                            <div class="oal-notification-list-chat" title="Chat for Any Enquiries "></div>
                                            <div class="mark-as-read"  title="Mark as Read">

                                            </div>
                                            <div class="glyphicon glyphicon-trash delete-icon" aria-hidden="true" title="Delete"></div>
                                        </div>

                                    </div>

                                    <div class="oal-notification-list-item-details">
                                        <div class="oal-notification-list-item-details-content">
                                            Please note that your free demurrage time at destination expires in 2 days,
                                            upon which you may incur the demurrage charge.
                                        </div>
                                        <div>
                                            <span class="notification-label">B/L #:</span> 4999900000
                                        </div>
                                        <div>
                                            <span class="notification-label">Demurrage Free Time Expiry:</span> 16 Mar
                                            2016 (Wed)
                                        </div>
                                    </div>

                                </li>
                                <li class="oal-notification-list-item oal-notification-list-item-unread">
                                    <div class="row ">
                                        <div class="col-lg-6 col-sm-6 col-md-6">


                                            <div class="oal-notification-list-item-group">
                                                <span class="new-indicator badge">New</span>
                                                <div class="oal-notification-list-item-title">

                                                    B/L #  4999900001  Free demurrage
                                                    time at destination expires in 2 days
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oal-notification-list-item-date col-lg-2  col-sm-2 col-md-2">29 Jun 2016 , 18:00</div>
                                        <div class="col-lg-2  col-sm-2 col-md-2"><a >Shipment Detail</a></div>
                                        <div class="oal-notification-list-item-action">

                                            <div class="oal-notification-list-chat" title="Chat for Any Enquiries"></div>
                                            <div class="mark-as-read"  title="Mark as Read"></div>
                                            <div class="glyphicon glyphicon-trash delete-icon" aria-hidden="true" title="Delete"></div>
                                        </div>
                                    </div>

                                    <div class="oal-notification-list-item-details">
                                        <div class="oal-notification-list-item-details-content">
                                            Please note that your free demurrage time at destination expires in 2 days,
                                            upon which you may incur the demurrage charge.
                                        </div>
                                        <div>
                                            <span class="notification-label">B/L #:</span> 4999900001
                                        </div>
                                        <div>
                                            <span class="notification-label">Demurrage Free Time Expiry:</span> 16 Mar
                                            2016 (Wed)
                                        </div>
                                    </div>

                                </li>
                                <li class="oal-notification-list-item oal-notification-list-item-unread ">
                                    <div class="row ">
                                        <div class="col-lg-6 col-sm-6 col-md-6">


                                            <div class="oal-notification-list-item-group">
                                                <span class="new-indicator badge">New</span>
                                                <div class="oal-notification-list-item-title">

                                                    B/L #  4999900004  Free demurrage
                                                    time at destination expires in 2 days
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oal-notification-list-item-date col-lg-2  col-sm-2 col-md-2">29 Jun 2016 , 18:00</div>
                                        <div class="col-lg-2  col-sm-2 col-md-2"><a >Shipment Detail</a></div>
                                        <div class="oal-notification-list-item-action">

                                            <div class="oal-notification-list-chat" title="Chat for Any Enquiries"></div>
                                            <div class="mark-as-read"  title="Mark as Read"></div>
                                            <div class="glyphicon glyphicon-trash delete-icon" aria-hidden="true" title="Delete"></div>
                                        </div>
                                    </div>

                                    <div class="oal-notification-list-item-details">
                                        <div class="oal-notification-list-item-details-content">
                                            Please note that your free demurrage time at destination expires in 2 days,
                                            upon which you may incur the demurrage charge.
                                        </div>
                                        <div>
                                            <span class="notification-label">B/L #:</span> 4999900004
                                        </div>
                                        <div>
                                            <span class="notification-label">Demurrage Free Time Expiry:</span> 16 Mar
                                            2016 (Wed)
                                        </div>
                                    </div>

                                </li>
                                <li class="oal-notification-list-item oal-notification-list-item-unread">
                                    <div class="row ">
                                        <div class="col-lg-6 col-sm-6 col-md-6">


                                            <div class="oal-notification-list-item-group">
                                                <span class="new-indicator badge">New</span>
                                                <div class="oal-notification-list-item-title">

                                                    B/L #  4999900005  Free demurrage
                                                    time at destination expires in 2 days
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oal-notification-list-item-date col-lg-2  col-sm-2 col-md-2">29 Jun 2016 , 18:00</div>
                                        <div class="col-lg-2  col-sm-2 col-md-2"><a >Shipment Detail</a></div>
                                        <div class="oal-notification-list-item-action">

                                            <div class="oal-notification-list-chat" title="Chat for Any Enquiries"></div>
                                            <div class="mark-as-read"  title="Mark as Read"></div>
                                            <div class="glyphicon glyphicon-trash delete-icon" aria-hidden="true" title="Delete"></div>
                                        </div>
                                    </div>

                                    <div class="oal-notification-list-item-details">
                                        <div class="oal-notification-list-item-details-content">
                                            Please note that your free demurrage time at destination expires in 2 days,
                                            upon which you may incur the demurrage charge.
                                        </div>
                                        <div>
                                            <span class="notification-label">B/L #:</span> 4999900005
                                        </div>
                                        <div>
                                            <span class="notification-label">Demurrage Free Time Expiry:</span> 16 Mar
                                            2016 (Wed)
                                        </div>
                                    </div>

                                </li>
                                <li class="oal-notification-list-item oal-notification-list-item-unread">
                                    <div class="row ">
                                        <div class="col-lg-6 col-sm-6 col-md-6">


                                            <div class="oal-notification-list-item-group">
                                                <span class="new-indicator badge">New</span>
                                                <div class="oal-notification-list-item-title">

                                                    B/L #  4999900009  Free demurrage
                                                    time at destination expires in 2 days
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oal-notification-list-item-date col-lg-2  col-sm-2 col-md-2">29 Jun 2016 , 18:00</div>
                                        <div class="col-lg-2  col-sm-2 col-md-2"><a >Shipment Detail</a></div>
                                        <div class="oal-notification-list-item-action">

                                            <div class="oal-notification-list-chat" title="Chat for Any Enquiries"></div>
                                            <div class="mark-as-read"  title="Mark as Read"></div>
                                            <div class="glyphicon glyphicon-trash delete-icon" aria-hidden="true" title="Delete"></div>
                                        </div>
                                    </div>

                                    <div class="oal-notification-list-item-details">
                                        <div class="oal-notification-list-item-details-content">
                                            Please note that your free demurrage time at destination expires in 2 days,
                                            upon which you may incur the demurrage charge.
                                        </div>
                                        <div>
                                            <span class="notification-label">B/L #:</span> 4999900009
                                        </div>
                                        <div>
                                            <span class="notification-label">Demurrage Free Time Expiry:</span> 16 Mar
                                            2016 (Wed)
                                        </div>
                                    </div>

                                </li>
                                <li class="oal-notification-list-item oal-notification-list-item-unread">
                                    <div class="row ">
                                        <div class="col-lg-6 col-sm-6 col-md-6">


                                            <div class="oal-notification-list-item-group">
                                                <span class="new-indicator badge">New</span>
                                                <div class="oal-notification-list-item-title">

                                                    B/L #  4999900011  Free demurrage
                                                    time at destination expires in 2 days
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oal-notification-list-item-date col-lg-2  col-sm-2 col-md-2">29 Jun 2016 , 18:00</div>
                                        <div class="col-lg-2  col-sm-2 col-md-2"><a >Shipment Detail</a></div>
                                        <div class="oal-notification-list-item-action">

                                            <div class="oal-notification-list-chat" title="Chat for Any Enquiries"></div>
                                            <div class="mark-as-unread" title="Mark as Unread"></div>
                                            <div class="glyphicon glyphicon-trash delete-icon" aria-hidden="true" title="Delete"></div>
                                        </div>
                                    </div>

                                    <div class="oal-notification-list-item-details">
                                        <div class="oal-notification-list-item-details-content">
                                            Please note that your free demurrage time at destination expires in 2 days,
                                            upon which you may incur the demurrage charge.
                                        </div>
                                        <div>
                                            <span class="notification-label">B/L #:</span> 4999900011
                                        </div>
                                        <div>
                                            <span class="notification-label">Demurrage Free Time Expiry:</span> 16 Mar
                                            2016 (Wed)
                                        </div>
                                    </div>

                                </li>
                                <li class="oal-notification-list-item">
                                    <div class="row">
                                        <div class="col-lg-6 col-sm-6 col-md-6">


                                            <div class="oal-notification-list-item-group">

                                                <div class="oal-notification-list-item-title">

                                                    B/L #  4999900012  Free demurrage
                                                    time at destination expires in 2 days
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oal-notification-list-item-date col-lg-2  col-sm-2 col-md-2">29 Jun 2016 , 18:00</div>
                                        <div class="col-lg-2  col-sm-2 col-md-2"><a >Shipment Detail</a></div>
                                        <div class="oal-notification-list-item-action">
                                            <div class="oal-notification-list-chat" title="Chat for Any Enquiries"></div>
                                            <div class="mark-as-unread"></div>
                                            <div class="glyphicon glyphicon-trash delete-icon" aria-hidden="true" title="Delete"></div>
                                        </div>
                                    </div>

                                    <div class="oal-notification-list-item-details">
                                        <div class="oal-notification-list-item-details-content">
                                            Please note that your free demurrage time at destination expires in 2 days,
                                            upon which you may incur the demurrage charge.
                                        </div>
                                        <div>
                                            <span class="notification-label">B/L #:</span> 4999900012
                                        </div>
                                        <div>
                                            <span class="notification-label">Demurrage Free Time Expiry:</span> 16 Mar
                                            2016 (Wed)
                                        </div>
                                    </div>

                                </li>
                                <li class="oal-notification-list-item">
                                    <div class="row">
                                        <div class="col-lg-6 col-sm-6 col-md-6">


                                            <div class="oal-notification-list-item-group">

                                                <div class="oal-notification-list-item-title">

                                                    B/L #  4999900015  Free demurrage
                                                    time at destination expires in 2 days
                                                </div>
                                            </div>
                                        </div>
                                        <div class="oal-notification-list-item-date col-lg-2  col-sm-2 col-md-2">29 Jun 2016 , 18:00</div>
                                        <div class="col-lg-2  col-sm-2 col-md-2"><a >Shipment Detail</a></div>
                                        <div class="oal-notification-list-item-action">
                                            <div class="oal-notification-list-chat" title="Chat for Any Enquiries"></div>
                                            <div class="mark-as-unread"></div>
                                            <div class="glyphicon glyphicon-trash delete-icon" aria-hidden="true" title="Delete"></div>
                                        </div>
                                    </div>

                                    <div class="oal-notification-list-item-details">
                                        <div class="oal-notification-list-item-details-content">
                                            Please note that your free demurrage time at destination expires in 2 days,
                                            upon which you may incur the demurrage charge.
                                        </div>
                                        <div>
                                            <span class="notification-label">B/L #:</span> 4999900015
                                        </div>
                                        <div>
                                            <span class="notification-label">Demurrage Free Time Expiry:</span> 16 Mar
                                            2016 (Wed)
                                        </div>
                                    </div>

                                </li>
                                <li class="oal-notification-list-item">
                                    <div class="row">
                                        <div class="col-lg-6 col-sm-6 col-md-6">
                                            <div class="oal-notification-list-item-group">

                                                <div class="oal-notification-list-item-title">

                                                    Free demurrage
                                                    time at destination expires in 2 days Please note that your free demurrage time at destination expires in 2 days,
                                                    upon which you may incur the demurrage charge.
                                                </div>
                                            </div>

                                        </div>
                                        <div class="oal-notification-list-item-date col-lg-2  col-sm-2 col-md-2">29 Jun 2016 , 18:00</div>
                                        <div class="col-lg-2  col-sm-2 col-md-2"><a >Shipment Detail</a></div>
                                        <div class="oal-notification-list-item-action">
                                            <div class="oal-notification-list-chat" title="Chat for Any Enquiries"></div>
                                            <div class="mark-as-unread" title="Mark as Unread"></div>
                                            <div class="glyphicon glyphicon-trash delete-icon" aria-hidden="true" title="Delete"></div>
                                        </div>
                                    </div>

                                    <div class="oal-notification-list-item-details">
                                        <div class="oal-notification-list-item-details-content">
                                            Please note that your free demurrage time at destination expires in 2 days,
                                            upon which you may incur the demurrage charge.
                                        </div>
                                        <div>
                                            <span class="notification-label">B/L #:</span> 4999900015
                                        </div>
                                        <div>
                                            <span class="notification-label">Demurrage Free Time Expiry:</span> 16 Mar
                                            2016 (Wed)
                                        </div>
                                    </div>

                                </li>

                            </ul>

                        </div>
                    </div>
                </div>
            </div>


        </div>

        <!-- Footer -->

        <div class="oal-page-footer">
            <div class="oal-page-footer-detail row">

                <div class="col-lg-6 col-md-6 col-sm-6 text-left">
                    <div class="oal-page-footer-section  ">

                        <div class="oal-page-footer-copyRight ">Copyright © 1998-2016. <br>Orient Overseas Container
                            Line Limited. <br>All rights reserved.
                        </div>
                    </div>

                </div>
                <div class="col-lg-6 col-md-6  col-sm-6">
                    <div class="oal-page-footer-section">
                        <div class="oal-page-footer-phone-images">
                            <img src="../../common/images/phone.png"/>
                        </div>
                        <div class="oal-page-footer-section-message text-left">
                            <div class="oal-page-footer-section-title">OOCL Seabird</div>
                            <p>Your shipment assistance who answer your shipment enquiry anytime anywhere</p>
                            <button class="btn btn-promo-action">Chat for App trial</button>
                        </div>
                        <div class="oal-page-footer-download-images">
                            <div class="oal-page-footer-download-google"></div>
                            <div class="oal-page-footer-download-app"></div>

                        </div>
                    </div>

                </div>


            </div>
        </div>


    </div>

    <div class="oal-page-chat-section">
        <div class="arrow"></div>

        <div class="oal-page-side-bar">
            <div class="oal-page-chat-active-icon"></div>
            <div class="oal-page-chat-active-item" id="btn_chat">
                <div class="icon-text oal-page-chat-icon">Chat</div>
                <span class="badge"> 3 </span>
            </div>
            <div class="oal-page-booking-item">
                <div class="icon-text oal-page-booking-item-icon"><i class="fa fa-gavel" aria-hidden="true"></i><br>Book</div>
            </div>
            <div class="oal-page-side-top">
                <span class="glyphicon glyphicon-arrow-up"></span>

                <div>Top</div>
            </div>
        </div>
        <div class="oal-page-chat-layer">
            <iframe id="chatIframe" src="http://chenji5-3-w7:90/NJS_PRS_CUST/secured/chat?userId=poonhs"></iframe>

        </div>

    </div>
</div>


<!--include JS File -->
<script src="../../common/js/jquery-1.12.4.js"></script>
<script src="../../common/js/bootstrap.js"></script>
<script src="../controler/homepage.js"></script>
<script src="../controler/notification.js"></script>


</body>
</html>